import React, {useEffect, useState} from 'react';
import {nanoid} from "nanoid";
import {
    Radio,
    Space,
    Image,
    Button
} from 'antd'
import {
    LeftCircleTwoTone,
    RightCircleTwoTone
} from '@ant-design/icons'


import {themes} from '../../../utils/themecolor'

import './index.css'
const backgroundImage = [
    "http://81.68.131.25/resource/img/bk1.jpg",
    "http://81.68.131.25/resource/img/bk2.jpg",
    "http://81.68.131.25/resource/img/bk3.jpg",
    "http://81.68.131.25/resource/img/bk4.jpg",
    "http://81.68.131.25/resource/img/bk5.jpg",
    "http://81.68.131.25/resource/img/bk6.jpg",
    "http://81.68.131.25/resource/img/bk7.jpg",
    "http://81.68.131.25/resource/img/bk8.jpg",
    "http://81.68.131.25/resource/img/bk9.jpg",
    "http://81.68.131.25/resource/img/bk10.jpg",
    "http://81.68.131.25/resource/img/bk11.jpg"
]

const profilePictureArr = [
    'http://81.68.131.25/resource/img/profilePicture/1.jpg',
    'http://81.68.131.25/resource/img/profilePicture/2.jpg',
    'http://81.68.131.25/resource/img/profilePicture/3.jpg',
    'http://81.68.131.25/resource/img/profilePicture/4.jpg',
    'http://81.68.131.25/resource/img/profilePicture/5.jpg',
    'http://81.68.131.25/resource/img/profilePicture/6.jpg',
    'http://81.68.131.25/resource/img/profilePicture/7.jpg',
    'http://81.68.131.25/resource/img/profilePicture/8.jpg',
    'http://81.68.131.25/resource/img/profilePicture/9.jpg',
    'http://81.68.131.25/resource/img/profilePicture/10.jpg',
    'http://81.68.131.25/resource/img/profilePicture/11.jpg',
]

const ThemeConfig = (props) => {


    const {
        setVision,
        initial:initialValue
    } = props;

    const [profilePicture,setProfilePicture] = useState(profilePictureArr[0]);
    const [themeColorIndex,setThemeColorIndex] = useState(0);
    const [themeColor,setThemeColor] = useState({...themes[0]})
    const [currentPicture,setCurrentPicture] = useState(0);

    function shiftLastPicture(){
        if(currentPicture>0){
            setCurrentPicture(currentPicture-1)
            setVision({
                themeColors:themeColor,
                profilePicture:profilePicture,
                backgroundImage:backgroundImage[currentPicture-1]
            })
        }
    }
    function shiftNextPicture(){
        if(currentPicture<backgroundImage.length-1){
            setCurrentPicture(currentPicture+1)
        }
        setVision({
            themeColors:themeColor,
            profilePicture:profilePicture,
            backgroundImage:backgroundImage[currentPicture+1]
        })
    }

    const changeThemeColor= function(e,colorType){
        const color = {...themeColor}
        color[colorType] = e.target.value
        console.log(color)
        setThemeColor(color)
        setVision({
            themeColors:color,
            profilePicture,
            backgroundImage:backgroundImage[currentPicture]
        })
    }


    useEffect(()=>{
        console.log(initialValue)
        setProfilePicture(initialValue.profilePicture)
        setThemeColor(initialValue.themeColors)
        for(let i=0;i<backgroundImage.length;i++){
            if(backgroundImage[i]===initialValue.backgroundImg){
                setCurrentPicture(i)
                break
            }
        }
    },[])

    function changeProfilePicture(e){
        if(e.target.tagName==='IMG'&&e.target.className==='profilePicture-collection-child'){
            const src = e.target.getAttribute('src')
            setProfilePicture(src);
            // e.preventDefault()
            setVision({
                themeColors:themeColor,
                profilePicture:src,
                backgroundImage:backgroundImage[currentPicture]
            })
        }
    }
    return (
        <div className='theme-config-box'>
            <div className="theme-profilePicture">
                <div className="profilePicture-results">
                    <span>头像设置</span>
                    <img  src={profilePicture} alt=""/>
                </div>
                <div onClick={changeProfilePicture} className="profilePicture-collection">

                    {
                        profilePictureArr.map(item=>{
                            return <div key={nanoid()}>
                                    <img className='profilePicture-collection-child'  src={item} alt=""/>
                                </div>
                        })
                    }
                </div>
            </div>
            <div className="theme-color">
                <div style={{textAlign:'center'}}>主题颜色配置</div>
                <div className="default-theme-color-collection">
                    <Radio.Group
                                 onChange={(e)=>{
                                     console.log(themes[e.target.value])
                                     setThemeColorIndex(e.target.value)
                                     setThemeColor(themes[e.target.value])
                                     setVision({
                                         themeColors:themes[e.target.value],
                                         profilePicture:profilePicture,
                                         backgroundImage:backgroundImage[currentPicture]
                                     })
                                 }}>
                        <Space direction={"vertical"}>
                            {
                                themes.map((color,index)=>{
                                    return (
                                        <Radio key={nanoid()}  value={index} >
                                            <div key={nanoid()}  className='color-card'>
                                                <span  style={{backgroundColor:color.themeColor}}/>
                                                <span  style={{backgroundColor:color.themeColor1}}/>
                                                <span  style={{backgroundColor:color.themeColor2}}/>
                                                <span  style={{backgroundColor:color.fontColor}}/>
                                                <span  style={{backgroundColor:color.titleColor}}/>
                                            </div>
                                        </Radio>
                                    )
                                })
                            }
                        </Space>
                    </Radio.Group>
                </div>
                <div className="theme-color-result">
                    <div>
                        <input type="color"
                               disabled={true}
                               onChange={(e)=>{changeThemeColor(e,'themeColor') }}
                               value={themeColor.themeColor} />
                        <div>主色</div>
                    </div>
                    <div>
                        <input type="color"
                               disabled={true}
                               onChange={(e)=>{changeThemeColor(e,'themeColor1')}}
                               value={themeColor.themeColor1} />
                        <div>副色1</div>
                    </div>
                    <div>
                        <input type="color"
                               disabled={true}
                               onChange={(e)=>{changeThemeColor(e,'themeColor2')}}
                               value={themeColor.themeColor2} />
                        <div>副色2</div>
                    </div>
                    <div>
                        <input type="color"
                               disabled={true}
                               onChange={(e)=>{changeThemeColor(e,'fontColor')}}
                               value={themeColor.fontColor} />
                        <div>文字颜色</div>
                    </div>
                    <div >
                        <input type="color"
                               disabled={true}
                               onChange={(e)=>{changeThemeColor(e,'titleColor')}}
                               value={themeColor.titleColor} />
                        <div>标题颜色</div>
                    </div>
                </div>
            </div>
            <div className="theme-picture">
                <div style={{textAlign: 'center'}}>
                    <Button
                        onClick={shiftLastPicture}
                        disabled={currentPicture===0}
                        icon={<LeftCircleTwoTone/>}
                        shape={"circle"}
                        type={"primary"}
                    />&nbsp;
                    背景图片配置:<span style={{color:'#1890ff'}}>背景图片{currentPicture+1}</span>&nbsp;
                    <Button
                        onClick={shiftNextPicture}
                        disabled={currentPicture===backgroundImage.length-1}
                        icon={<RightCircleTwoTone/>}
                        shape={"circle"}
                        type={"primary"}
                    />
                </div>
                <div className="theme-picture-collection">
                    <div key={nanoid()}>
                        <Image src={backgroundImage[currentPicture]} width={'100%'}/>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ThemeConfig;